Ext.define('GM.App', {
        extend: 'Ext.container.Viewport',

        initComponent: function(){
            Ext.apply(this, {
                    id: 'border',
                    layout: 'border',
                    padding: 5,
                    items: [
                        this.createHeader(), 
                        this.createMenuPanel(), 
                        this.createCenterPanel()
                    ]
            });
            this.callParent(arguments);
        },

        createMenuPanel: function(){
            this.menuPanel = Ext.create('widget.menuPanel', {
                region: 'west',
                id: 'west-panel',
                margins: '0 0 0 5',
                items: [{
                    title: 'DashBoard',
                    html: '<p>Some navigation in here.</p>'
                }, {
                    title: 'Google',
                    html: '<p>Some settings in here.</p>'
                }, 
                //this.createFeedPanel(),
                this.createBlogMenuPanel()]
            });
            
            return this.menuPanel;
        },

        createBlogMenuPanel: function(){
            this.blogMenuPanel = Ext.create('widget.blogMenuPanel', {
                title: 'Blog Menu'
            });

            return this.blogMenuPanel;
        },

        createFeedPanel: function(){
            this.feedPanel = Ext.create('widget.feedPanel');
        },

        createCenterPanel: function(){
            this.centerPanel = Ext.create('Ext.tab.Panel', {
                region: 'center',
                deferredRender: false,
                activeTab: 0,
                items: [{
                   title: 'Close Me',
                   closable: true,
                   autoScroll: true,
                   autoEl: {
                       tag: 'div',
                       html: 'center'
                   }
                }]
            });

            return this.centerPanel;
        },

        createHeader: function(){
            this.headerPanel = Ext.create('Ext.Component', {
                region: 'north',
                height: 32,
                autoEl: {
                    tag: 'div',
                    html: '<p>Going Merry</p>'
                }
            });

            return this.headerPanel;
        }
});
